import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  Image,
  ScrollView,
  Dimensions,
  SafeAreaView,
  Alert,
} from 'react-native';
import { wp, hp, SPACES } from '../utils/layout';
import { FONT_SIZES } from '../utils/fontSize';
import useResponsive from '../hooks/useResponsive';
import CheckBox from '@react-native-community/checkbox';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');

const PhoneLoginScreen = ({ navigation }: any) => {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [checked, setChecked] = useState(false);
  const { size } = useResponsive();

  return (
    <SafeAreaView style={styles.safeArea}>
      <KeyboardAvoidingView
        style={styles.flex1}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      >
        <View style={styles.container}>
          {/* 顶部栏 */}
          <View style={styles.header}>
            <TouchableOpacity onPress={() => navigation.goBack()}>
              <Text style={styles.close}>×</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('Register')}>
              <Text style={styles.register}>注册</Text>
            </TouchableOpacity>
          </View>
          <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
            {/* 标题 */}
            <Text style={styles.title}>手机验证码登录</Text>
            <Text style={styles.subtitle}>未注册手机号将自动注册并登录</Text>
            {/* 手机号输入 */}
            <View style={styles.inputBox}>
              <Image source={{ uri: 'https://img.icons8.com/color/48/000000/iphone-x.png' }} style={styles.inputIconImg} />
              <Text style={styles.inputPrefix}>+86</Text>
              <TextInput
                style={[styles.input, { fontSize: FONT_SIZES.xs }]}
                placeholder="请输入11位手机号"
                placeholderTextColor="#bbb"
                keyboardType="phone-pad"
                maxLength={11}
                value={phone}
                onChangeText={setPhone}
              />
            </View>
            {/* 验证码输入 */}
            <View style={styles.inputBox}>
              <Image source={{ uri: 'https://img.icons8.com/fluency/48/lock-2.png' }} style={styles.inputIconImg} />
              <TextInput
                style={[styles.input, { flex: 1, fontSize: FONT_SIZES.xs }]}
                placeholder="请输入验证码"
                placeholderTextColor="#bbb"
                keyboardType="number-pad"
                maxLength={6}
                value={code}
                onChangeText={setCode}
              />
              <TouchableOpacity style={styles.codeBtn}>
                <Text style={styles.codeBtnText}>获取</Text>
              </TouchableOpacity>
            </View>
            <TouchableOpacity style={styles.codeTip}>
              <Text style={styles.codeTipText}>收不到验证码</Text>
            </TouchableOpacity>
            {/* 登录按钮 */}
            <TouchableOpacity style={styles.loginBtn} onPress={() => navigation.replace('MainTabs')}>
              <Text style={styles.loginBtnText}>登录</Text>
            </TouchableOpacity>
            {/* 账号密码登录 */}
            <TouchableOpacity style={styles.pwdLogin} onPress={() => navigation.navigate('AccountLogin')}>
              <Text style={styles.pwdLoginText}>用账号密码登录</Text>
            </TouchableOpacity>
            {/* 快速登录 */}
            <View style={styles.dividerBox}>
              <View style={styles.divider} />
              <Text style={styles.quickLoginTitle}>快速登录</Text>
              <View style={styles.divider} />
            </View>
            <View style={styles.quickLoginBox}>
              <TouchableOpacity style={styles.quickIconBox}>
                <Image source={{ uri: 'https://img.icons8.com/color/48/000000/weixing.png' }} style={styles.quickIcon} />
              </TouchableOpacity>
              <TouchableOpacity style={styles.quickIconBox}>
                <Image source={{ uri: 'https://img.icons8.com/ios-filled/50/000000/mac-os.png' }} style={styles.quickIcon} />
              </TouchableOpacity>
            </View>
          </ScrollView>
          {/* 协议勾选 固定底部 */}
          <View style={styles.protocolBox}>
            <CheckBox value={checked} onValueChange={setChecked} boxType="square" tintColors={{ true: '#1976ff', false: '#bbb' }} />
            <Text style={styles.protocolText}>
              我已阅读并同意《中国移动认证服务条款》和AI智能医疗辅助系统 用户协议、隐私政策 以及儿童个人信息保护政策
            </Text>
          </View>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  flex1: {
    flex: 1,
    backgroundColor: '#fff',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 24,
    paddingTop: 40,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 0,
    height: 40,
  },
  close: {
    fontSize: 28,
    color: '#222',
    fontWeight: 'bold',
  },
  register: {
    fontSize: 16,
    color: '#1976ff',
    fontWeight: 'bold',
  },
  scrollContent: {
    flexGrow: 1,
    justifyContent: 'flex-start',
    minHeight: 0,
    paddingTop: 0,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#222',
    textAlign: 'center',
    marginTop: 60,
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 14,
    color: '#888',
    textAlign: 'center',
    marginBottom: 32,
  },
  inputBox: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f6fa',
    borderRadius: 24,
    paddingHorizontal: 16,
    marginBottom: 20,
    height: 48,
    width: '100%',
  },
  inputIconImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
    marginRight: 8,
  },
  inputPrefix: {
    fontSize: 16,
    color: '#222',
    marginRight: 8,
  },
  input: {
    flex: 1,
    fontSize: 16,
    color: '#222',
    minWidth: 0,
  },
  codeBtn: {
    backgroundColor: '#fff',
    borderColor: '#1976ff',
    borderWidth: 1,
    borderRadius: 16,
    paddingHorizontal: 16,
    paddingVertical: 4,
    marginLeft: 8,
    height: 32,
    justifyContent: 'center',
    alignItems: 'center',
  },
  codeBtnText: {
    color: '#1976ff',
    fontSize: 14,
  },
  codeTip: {
    alignSelf: 'flex-end',
    marginBottom: 0,
    marginTop: -12,
  },
  codeTipText: {
    color: '#1976ff',
    fontSize: 14,
  },
  loginBtn: {
    backgroundColor: '#1976ff',
    borderRadius: 24,
    height: 48,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    marginTop: 0,
    marginBottom: 32,
  },
  loginBtnText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  pwdLogin: {
    alignSelf: 'center',
    marginBottom: 24,
  },
  pwdLoginText: {
    color: '#1976ff',
    fontSize: 14,
    textAlign: 'center',
  },
  dividerBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 24,
    width: '100%',
  },
  divider: {
    flex: 1,
    height: 1,
    backgroundColor: '#eee',
  },
  quickLoginTitle: {
    color: '#888',
    fontSize: 14,
    marginHorizontal: 8,
    textAlign: 'left',
  },
  quickLoginBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 24,
  },
  quickIconBox: {
    marginHorizontal: 16,
    backgroundColor: '#f5f6fa',
    borderRadius: 32,
    padding: 12,
  },
  quickIcon: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
  },
  protocolBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 24,
    marginTop: 'auto',
    paddingHorizontal: 0,
  },
  protocolText: {
    fontSize: 12,
    color: '#bbb',
    marginLeft: 8,
    flex: 1,
    lineHeight: 18,
  },
});

export default PhoneLoginScreen; 